✨ feat: add shimmer animation for enhanced UI effects #441
Conversation
✅ Deploy Preview for kubestellar-docs ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
@naman9271 I have converted this into progressive levels, implemented step by step. If you need any changes or have suggestions, please feel free to share your feedback and review. Thank you. |
adity1raut
changed the title
|
@adity1raut we don't meant t o be like that we want to enhance that not degrade the current version, please try to make it better |
Screencast.From.2025-12-24.21-56-27.webm@naman9271 PTAL |
|
no it is not liek that the ocntribution ladder is for users it shows no meaning |
Screencast.From.2025-12-29.12-40-27.webm@naman9271 PTAL |
|
@naman9271 Any chnages Want Please Suggest ? |
|
/retest |
clubanderson
changed the title
kubestellar-prow
bot
added
the
size/L
|
/retest |
|
The Please rebase your branch on main or merge main into your branch to pick up the workflow changes: git fetch origin main
git rebase origin/main
git push --force-with-leaseThis will stop the failing workflows from running. |
clubanderson
added
the
kind/feature
…layout Signed-off-by: adity1raut <[email protected]>
kubestellar-prow
bot
added
the
dco-signoff: yes
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
|
/cc @clubanderson PTAL |
|
@adity1raut: GitHub didn't allow me to request PR reviews from the following users: PTAL. Note that only kubestellar members and repo collaborators can review this PR, and authors cannot review their own PRs. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. |
There was a problem hiding this comment.
Pull request overview
This PR adds shimmer animations and enhanced visual effects to the maintainer ladder page, including hover states, glowing borders, animated particles, and improved layout styling for both mobile and desktop views.
Changes:
- Added hover state management with useState for interactive animations
- Refactored mobile and desktop layouts with enhanced visual effects including glowing borders, animated particles, and smooth transitions
- Improved card styling with gradient effects, better spacing, and modern UI patterns
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-700"> | ||
| <div | ||
| className={`absolute top-0 left-0 w-32 h-32 bg-gradient-to-br ${level.gradient} rounded-full blur-3xl opacity-20`} | ||
| ></div> | ||
| <div | ||
| className={`absolute bottom-0 right-0 w-32 h-32 bg-gradient-to-tl ${level.gradient} rounded-full blur-3xl opacity-20`} | ||
| ></div> | ||
| </div> |
There was a problem hiding this comment.
The shimmer and animation effects lack accessibility considerations. Users with vestibular disorders or motion sensitivity may experience discomfort. Consider adding a check for the prefers-reduced-motion media query to disable or reduce animations for users who have enabled this setting in their system preferences.
| </div> | ||
| )} | ||
| <p className="text-gray-300 text-sm mb-4"> | ||
| <p className="text-gray-400 text-sm mb-3 line-clamp-2"> |
There was a problem hiding this comment.
The text truncation with line-clamp-2 on the description may hide important information without providing a way to expand or view the full content. Consider adding a tooltip or expandable section to ensure all content remains accessible to users.
| <p className="text-gray-400 text-sm mb-3 line-clamp-2"> | |
| <p | |
| className="text-gray-400 text-sm mb-3 line-clamp-2" | |
| title={level.description} | |
| > |
| {level.requirements.slice(0, 2).map((req, reqIndex) => ( | ||
| <div key={reqIndex} className="flex items-start gap-2"> | ||
| <div | ||
| className={`w-1 h-1 rounded-full bg-gradient-to-r ${level.gradient} mt-1.5 flex-shrink-0`} | ||
| ></div> | ||
| <p className="text-xs text-gray-400 line-clamp-1"> | ||
| {req} | ||
| </p> | ||
| </div> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
|
|
||
| {level.goodStanding && ( | ||
| <div className="mt-4 p-3 bg-blue-900/20 border border-blue-500/30 rounded-lg"> | ||
| <h4 className="text-sm font-semibold text-blue-300 mb-2"> | ||
| {t("goodStandingLabel")} | ||
| </h4> | ||
| <p className="text-xs text-gray-300 leading-relaxed"> | ||
| {level.goodStanding} | ||
| </p> | ||
| {level.requirements.length > 2 && ( | ||
| <p className="text-xs text-gray-500 italic"> | ||
| +{level.requirements.length - 2} more | ||
| </p> | ||
| )} |
There was a problem hiding this comment.
The requirements are truncated to show only the first 2 items with a "+X more" indicator. This hides potentially critical information from users. Consider showing all requirements or providing an interactive way to expand and view the complete list.
| <div | ||
| className={`w-1 h-1 rounded-full bg-gradient-to-r ${level.gradient} mt-1.5 flex-shrink-0`} | ||
| ></div> | ||
| <p className="text-xs text-gray-400 line-clamp-1"> |
There was a problem hiding this comment.
The text is truncated with line-clamp-1 which may hide important requirement details. Consider removing the truncation or providing a way to view the complete text to ensure all information is accessible.
| <p className="text-xs text-gray-400 line-clamp-1"> | |
| <p | |
| className="text-xs text-gray-400 line-clamp-1" | |
| title={req} | |
| aria-label={req} | |
| > |
| {/* Central Ladder Line with pulse effect */} | ||
| <div className="absolute left-1/2 top-0 bottom-0 w-1 transform -translate-x-1/2 z-5"> | ||
| <div className="absolute inset-0 bg-gradient-to-b from-blue-500 via-purple-500 to-red-500"></div> | ||
| <div className="absolute inset-0 bg-gradient-to-b from-blue-400 via-purple-400 to-red-400 animate-pulse opacity-50"></div> |
There was a problem hiding this comment.
The animate-pulse effect on the central ladder line runs continuously, which could be distracting and may cause issues for users with motion sensitivity. Consider making this animation respect the prefers-reduced-motion setting.
| <div className="absolute inset-0 bg-gradient-to-b from-blue-400 via-purple-400 to-red-400 animate-pulse opacity-50"></div> | |
| <div className="absolute inset-0 bg-gradient-to-b from-blue-400 via-purple-400 to-red-400 animate-pulse motion-reduce:animate-none opacity-50"></div> |
| <div | ||
| className={`absolute -inset-[2px] bg-gradient-to-r ${level.gradient} rounded-xl opacity-0 group-hover:opacity-70 blur transition-opacity duration-500`} | ||
| ></div> | ||
|
|
||
| <p className="text-gray-300 mb-6 leading-relaxed"> | ||
| {level.description} | ||
| </p> | ||
| <div className="relative bg-gradient-to-br from-gray-900/90 to-gray-800/90 backdrop-blur-xl rounded-xl p-6 border border-white/5 overflow-hidden"> | ||
| {/* Animated corner accents */} | ||
| <div | ||
| className={`absolute top-0 ${ | ||
| index % 2 === 0 ? "right-0" : "left-0" | ||
| } w-24 h-24 bg-gradient-to-br ${level.gradient} rounded-full blur-3xl opacity-0 group-hover:opacity-20 transition-opacity duration-700`} | ||
| ></div> |
There was a problem hiding this comment.
Duplicate code pattern: The glowing border effect and animated background particles are duplicated between mobile (lines 273-286) and desktop (lines 388-398) layouts. Consider extracting this into a reusable component to improve maintainability and reduce code duplication.
| ></div> | ||
|
|
||
| <div className="relative bg-gradient-to-br from-gray-900/90 to-gray-800/90 backdrop-blur-xl rounded-xl p-5 border border-white/5 overflow-hidden"> | ||
| {/* Animated background particles */} | ||
| <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-700"> | ||
| <div | ||
| className={`absolute top-0 left-0 w-32 h-32 bg-gradient-to-br ${level.gradient} rounded-full blur-3xl opacity-20`} | ||
| ></div> | ||
| <div | ||
| className={`absolute bottom-0 right-0 w-32 h-32 bg-gradient-to-tl ${level.gradient} rounded-full blur-3xl opacity-20`} |
There was a problem hiding this comment.
Performance concern: Each level item creates multiple animated blur effects that render on hover. With multiple levels on the page, this could cause performance issues, especially on lower-end devices. Consider using CSS containment properties or will-change hints to optimize rendering performance.
| ></div> | |
| <div className="relative bg-gradient-to-br from-gray-900/90 to-gray-800/90 backdrop-blur-xl rounded-xl p-5 border border-white/5 overflow-hidden"> | |
| {/* Animated background particles */} | |
| <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-700"> | |
| <div | |
| className={`absolute top-0 left-0 w-32 h-32 bg-gradient-to-br ${level.gradient} rounded-full blur-3xl opacity-20`} | |
| ></div> | |
| <div | |
| className={`absolute bottom-0 right-0 w-32 h-32 bg-gradient-to-tl ${level.gradient} rounded-full blur-3xl opacity-20`} | |
| style={{ willChange: "opacity" }} | |
| ></div> | |
| <div className="relative bg-gradient-to-br from-gray-900/90 to-gray-800/90 backdrop-blur-xl rounded-xl p-5 border border-white/5 overflow-hidden"> | |
| {/* Animated background particles */} | |
| <div | |
| className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-700" | |
| style={{ contain: "paint" }} | |
| > | |
| <div | |
| className={`absolute top-0 left-0 w-32 h-32 bg-gradient-to-br ${level.gradient} rounded-full blur-3xl opacity-20`} | |
| style={{ willChange: "opacity" }} | |
| ></div> | |
| <div | |
| className={`absolute bottom-0 right-0 w-32 h-32 bg-gradient-to-tl ${level.gradient} rounded-full blur-3xl opacity-20`} | |
| style={{ willChange: "opacity" }} |
| className="relative group" | ||
| onMouseEnter={() => setHoveredLevel(level.id)} | ||
| onMouseLeave={() => setHoveredLevel(null)} |
There was a problem hiding this comment.
The hover effects with onMouseEnter and onMouseLeave are not keyboard accessible. Users navigating with keyboard or screen readers won't be able to trigger these effects. Consider adding onFocus and onBlur event handlers, and ensuring the elements are keyboard-focusable with appropriate tabIndex values.
| className="relative group" | |
| onMouseEnter={() => setHoveredLevel(level.id)} | |
| onMouseLeave={() => setHoveredLevel(null)} | |
| className="relative group" | |
| tabIndex={0} | |
| onMouseEnter={() => setHoveredLevel(level.id)} | |
| onMouseLeave={() => setHoveredLevel(null)} | |
| onFocus={() => setHoveredLevel(level.id)} | |
| onBlur={() => setHoveredLevel(null)} |
| className="relative z-20 mb-8" | ||
| onMouseEnter={() => setHoveredLevel(level.id)} | ||
| onMouseLeave={() => setHoveredLevel(null)} |
There was a problem hiding this comment.
Same accessibility issue with keyboard navigation. The hover effects triggered by onMouseEnter and onMouseLeave are not accessible to keyboard users. Add onFocus and onBlur handlers and ensure keyboard accessibility.
| className="relative z-20 mb-8" | |
| onMouseEnter={() => setHoveredLevel(level.id)} | |
| onMouseLeave={() => setHoveredLevel(null)} | |
| className="relative z-20 mb-8" | |
| tabIndex={0} | |
| onMouseEnter={() => setHoveredLevel(level.id)} | |
| onMouseLeave={() => setHoveredLevel(null)} | |
| onFocus={() => setHoveredLevel(level.id)} | |
| onBlur={() => setHoveredLevel(null)} |
| className="flex items-start gap-2 group/item" | ||
| > | ||
| <div | ||
| className={`w-1.5 h-1.5 rounded-full bg-gradient-to-r ${level.gradient} mt-1.5 flex-shrink-0 group-hover/item:scale-150 transition-transform duration-200`} |
There was a problem hiding this comment.
The nested group classes (group and group/item) create a nested hover state system. However, the group-hover/item:scale-150 transition on the bullet point may be too aggressive and could cause layout shifts. Consider using a more subtle scale value like scale-125 to prevent visual jumping.
| className={`w-1.5 h-1.5 rounded-full bg-gradient-to-r ${level.gradient} mt-1.5 flex-shrink-0 group-hover/item:scale-150 transition-transform duration-200`} | |
| className={`w-1.5 h-1.5 rounded-full bg-gradient-to-r ${level.gradient} mt-1.5 flex-shrink-0 group-hover/item:scale-125 transition-transform duration-200`} |
|
give me before and after pic of the latest one |
BefourScreencast.From.2026-01-14.22-25-40.webm |
|
Welcome to KubeStellar! 🚀 Thank you for submitting this Pull Request. Before your PR can be merged, please ensure: ✅ DCO Sign-off - All commits must be signed off with ✅ PR Title - Must start with an emoji: ✨ (feature), 🐛 (bug fix), 📖 (docs), 🌱 (infra/tests), Getting Started with KubeStellar: Contributor Resources:
🌟 Help KubeStellar Grow - We Need Adopters! Our roadmap is driven entirely by adopter feedback. Whether you're using KubeStellar yourself or know someone who could benefit from multi-cluster Kubernetes: 📋 Take our Multi-Cluster Survey - Share your use cases and help shape our direction! A maintainer will review your PR soon. Feel free to ask questions in the comments or on Slack! |
After |
4 participants
📌 Fixes
Fixes #362
📝 Summary of Changes
Changes Made
Checklist
Please ensure the following before submitting your PR:
Screenshots or Logs (if applicable)
Screencast.From.2025-12-23.10-56-30.webm
👀 Reviewer Notes
Add any special notes for the reviewer here